<template>
  <!-- 登录页 -->
  <div class="login-containe">
    <div class="hd-inner">
      <div class="header-box" />
      <div class="header-j">技术运维</div>
    </div>
    <div class="left">
      <div class="box">
        <img src="./img/loginbg.png">
      </div>
      <!-- <div class="bb">
        <h5>掌握各个接入渠道的基本信息、服务信息及渠道支付管理</h5>
        <h5>便于后续降低手续费支出成本，减轻财务负担；建立渠道商投诉机制</h5>
        <h5>市县单位对渠道商的违规行为进行投诉，合理监控渠道商的违规操作</h5>
      </div> -->
    </div>
    <div class="right">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        autocomplete="on"
        label-position="left"
      >
        <div class="title-container">
          <h3 class="title">
            管理员登录
          </h3>
          <!-- <lang-select class="set-language" /> -->
        </div>

        <el-form-item prop="username">
          <span class="svg-container">
            <!-- <svg-icon icon-class="user" /> -->
            <svg
              t="1641365327184"
              class="icon "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2394"
              width="200"
              height="200"
            >
              <path
                d="M407.850667 947.456c-88.192 0-322.517333 0-322.517334-150.528 0-115.114667 147.669333-212.437333 322.517334-212.437333s322.517333 96.896 322.517333 211.541333c-0.042667 151.424-242.773333 151.424-322.517333 151.424z m0-298.965333c-147.968 0-258.517333 78.378667-258.517334 148.437333 0 57.429333 86.997333 86.528 258.517334 86.528 117.930667 0 258.517333-15.146667 258.517333-87.424-0.042667-69.674667-110.592-147.541333-258.517333-147.541333zM407.850667 513.152h-1.365334a216.021333 216.021333 0 0 1-153.728-64.256 216.192 216.192 0 0 1-63.146666-154.069333 218.410667 218.410667 0 0 1 218.197333-218.069334c120.277333 0 218.154667 97.877333 218.154667 218.197334s-97.834667 218.197333-218.112 218.197333z m0-372.352a154.368 154.368 0 0 0-154.197334 154.197333 152.576 152.576 0 0 0 44.544 108.842667 152.576 152.576 0 0 0 108.416 45.354667l1.237334 32v-32c84.992 0 154.154667-69.162667 154.154666-154.197334S492.842667 140.8 407.850667 140.8zM716.842667 462.037333a32.042667 32.042667 0 0 1-8.277334-62.890666 108.373333 108.373333 0 0 0 80.256-104.618667 108.501333 108.501333 0 0 0-86.357333-106.069333 31.957333 31.957333 0 1 1 12.842667-62.677334 172.8 172.8 0 0 1 137.557333 168.832 172.458667 172.458667 0 0 1-127.744 166.4 34.858667 34.858667 0 0 1-8.277333 1.024zM839.296 793.642667a32 32 0 0 1-7.210667-63.146667c23.936-5.589333 38.229333-24.234667 38.229334-39.04 0-30.336-56.106667-76.842667-125.269334-76.842667a32 32 0 0 1 0-64c99.029333 0 189.269333 67.114667 189.269334 140.842667 0 46.848-36.821333 89.472-87.637334 101.376a34.005333 34.005333 0 0 1-7.381333 0.810667z"
                fill="#130F26"
                p-id="2395"
              />
            </svg>
          </span>
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="手机号"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>

        <el-tooltip
          v-model="capsTooltip"
          content="Caps lock is On"
          placement="bottom-end"
          manual
        >
          <el-form-item
            prop="password"
            class="code"
          >
            <span class="svg-container">
              <!-- <svg-icon icon-class="password" /> -->
              <svg
                t="1641365652214"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2532"
                width="200"
                height="200"
              >
                <path
                  d="M313.6 433.237333a32 32 0 0 1-32-32V308.693333a225.578667 225.578667 0 0 1 223.786667-223.317333c100.608-0.170667 190.677333 64.896 219.733333 160.853333a32 32 0 0 1-61.269333 18.56c-20.821333-68.864-85.333333-117.333333-157.696-115.370666A161.706667 161.706667 0 0 0 345.6 309.248v91.989333a32 32 0 0 1-32 32zM508.16 730.752a32 32 0 0 1-32-32v-94.762667a32 32 0 0 1 64 0v94.762667a32 32 0 0 1-32 32z"
                  fill="#130F26"
                  p-id="2533"
                />
                <path
                  d="M508.16 943.658667c-261.589333 0-358.826667-81.194667-358.826667-299.562667 0-218.410667 97.237333-299.562667 358.826667-299.562667 261.632 0 358.869333 81.194667 358.869333 299.562667s-97.237333 299.562667-358.869333 299.562667z m0-535.168C279.466667 408.490667 213.333333 461.354667 213.333333 644.096s66.133333 235.562667 294.826667 235.562667c228.736 0 294.869333-52.821333 294.869333-235.562667s-66.133333-235.605333-294.869333-235.605333z"
                  fill="#130F26"
                  p-id="2534"
                />
              </svg>
            </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="密码"
              name="password"
              tabindex="2"
              autocomplete="on"
              @keyup.native="checkCapslock"
              @blur="capsTooltip = false"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
        </el-tooltip>

        <el-button
          :loading="loading"
          type="success"
          style="
            width: 50%;
            margin-bottom: 30px;
            background-color: #e3eae5;
            color: black;
          "
          @click.native.prevent="handleLogin"
        >
          登录
        </el-button>

      </el-form>

    </div>
    <div class="login-ft">
      <div class="ft-inner">
        <div class="about-us">
          <!-- <a href="javascript:;">关于我们</a> <a href="javascript:;">法律声明</a> <a
					href="javascript:;">服务条款</a> <a href="javascript:;">联系方式</a> -->
        </div>
        <div class="address">地址：河南省郑州市&nbsp;邮编：450000&nbsp;&nbsp;Copyright&nbsp;©&nbsp;2020&nbsp;-&nbsp;2021&nbsp;</div>
        <div class="other-info">网格化工作号核心运维系统&nbsp;</div>
        <div class="other-info">推荐使用chrome浏览器&nbsp;</div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Login',

  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      computeTime: 0,
      // 密码校验规则
      loginRules: {
        username: [{ required: true, trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur' }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {},
  created() {
    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 登录跳转
    handleLogin() {
      console.log(111)
      this.$router.push({ path: '/dashboard' })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg: #fff;
// #fff: #fff;
// rgb(39, 37, 37): rgb(39, 37, 37);

@supports (-webkit-mask: none) and (not (cater-color: rgb(39, 37, 37))) {
  .login-containe .el-input input {
    color: rgb(39, 37, 37);
  }
}

/* reset element-ui css */
.login-containe {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #fff;
      height: 47px;
      caret-color: rgb(39, 37, 37);
      color: black;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: rgb(39, 37, 37) !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(12, 11, 11, 0.1);
    // background: rgba(3, 3, 3, 0.1);
    border-radius: 5px;
    color: #1a1919;
  }
}
</style>

<style lang="scss" scoped>
.hd-inner {
  display: flex;
  width: 100%;
  height: 60px;
}
.header-box {
  width: 330px;
  height: 100%;
  background: url("./img/go_w.png") no-repeat;
}
.header-j {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 60px;
  border-left: 1px solid black;
  padding-left: 15px;
}
.login-ft {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 20px;
}
.login-ft .ft-inner .address {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
}
.login-ft .ft-inner .other-info {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-bottom: 50px;
}
.login-containe {
  display: flex;
  min-height: 100%;
  width: 100%;
  background-color: #fff;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 420px;
    max-width: 100%;
    padding: 160px 35px 0;
    overflow: hidden;
    left: -60px;
    transform: translateX(-50%);
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      // color: #fff;
      color: black;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }

    .set-language {
      color: #fff;
      position: absolute;
      top: 3px;
      font-size: 18px;
      right: 0px;
      cursor: pointer;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
.box {
  position: absolute;
  right: -1px;
  top: 10px;
}
.left {
  position: relative;
  width: 50%;
  height: 500px;
  margin-top: 150px;
  box-shadow: 3px -1px 2px -2px rgba(47, 47, 53, 0.2);
  left:-40%;
  transform: translateX(80%);
}
.right {
  position: relative;
  width: 50%;
  height: 800px;
}
.bb {
  position: absolute;
  right: 93px;
  top: 340px;
}
.code {
  width: 100%;
}
.login-code {
  position: relative;
  width: 33%;
  height: 38px;
  top: -69px;
  right: -312px;
}
.icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-12%);
}
</style>
